<template>
  <view :data-theme="globPrimary">
    <u-navbar>
      <view class="navbar-content" :style="[titleStyle]">
        <view class="title">我的教学</view>
      </view>
      <view slot="right" class="u-flex navbar-right" @click="pick">
        <u-image
          width="30rpx"
          height="30rpx"
          src="@/pageUser/static/images/navbar_livecourse_icon.png"
        ></u-image>
        <view class="text">直播课表</view>
      </view>
    </u-navbar>
    <view class="teach-wrap" :style="{ height: mescrollHeight }">
      <view class="tabs-box">
        <u-tabs-swiper
          :activeColor="globPrimaryColor"
          ref="tabs"
          :list="tabList"
          :current="current"
          @change="change"
          :bold="false"
          :is-scroll="false"
          swiperWidth="750"
        ></u-tabs-swiper>
      </view>
      <swiper
        class="swiper-box"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiper-item" v-for="(page, index) in tabList" :key="index">
          <teachingItem :value="page.val"></teachingItem>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import teachingItem from './components/teaching-item.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    teachingItem,
  },
  data() {
    return {
      tabList: [
        {
          name: '点播',
          val: 'video',
        },
        {
          name: '直播',
          val: 'live',
        },
      ],
      current: 0,
      swiperCurrent: 0,
      dx: 0,
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    // 导航中间的标题的样式
    titleStyle() {
      let titleWidth = 180
      let systemInfo = uni.getSystemInfoSync()
      let style = {}
      // #ifndef MP
      style.left = (systemInfo.windowWidth - uni.upx2px(titleWidth)) / 2 + 'px'
      style.right = (systemInfo.windowWidth - uni.upx2px(titleWidth)) / 2 + 'px'
      // #endif
      // #ifdef MP
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left
      style.left = (systemInfo.windowWidth - rightButtonWidth - uni.upx2px(titleWidth)) / 2 + 'px'
      style.right =
        (systemInfo.windowWidth - rightButtonWidth - uni.upx2px(titleWidth)) / 2 +
        rightButtonWidth +
        'px'
      // #endif
      style.width = uni.upx2px(titleWidth) + 'px'
      return style
    },
    globWindowHeight() {
      return this.$u.sys().windowHeight
    },
    mescrollHeight() {
      let height = this.globWindowHeight - this.globNavbarHeight - this.globStatusBarHeight
      return `${height}px`
    },
  },
  options: { styleIsolation: 'shared' },
  methods: {
    // tab栏切换
    change(index) {
      this.swiperCurrent = index
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx)
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.current = current
    },
    pick() {
      this.$u.route('/pageUser/teaching/schedule')
    },
  },
}
</script>

<style lang="scss" scoped>
.navbar-content {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  height: 60rpx;
  text-align: center;
  .title {
    font-size: 16px;
    color: $edu-content-color;
    text-align: center;
  }
}
.navbar-right {
  margin-right: 30rpx;
  .text {
    margin-left: 8rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: $edu-main-color;
  }
}
.teach-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;

  .tabs-box {
    padding: 0 30rpx;
  }
  .swiper-box {
    flex: 1;
    /deep/.uni-swiper-wrapper {
      z-index: 981;
    }
  }
  .swiper-item {
    height: 100%;
  }
  .bottom-box {
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    height: 98rpx;
    box-shadow: 0 2rpx 14rpx 0 rgba(0, 0, 0, 0.06);
    .count {
      margin-left: auto;
      font-size: 32rpx;
      font-weight: 400;
      @include text-color();
    }
  }
}
</style>
